import React, { Component } from "react";
import { NavBar } from "antd-mobile";
import SearchInput from "../searchInput/SearchInput";
import "./Category.scss";
import { withRouter } from "react-router-dom";
import myaxios from "../../utils/myaxios";
import axios from "axios"

class Category extends Component {
  constructor(props) {
    super(props);
    const CancelToken = axios.CancelToken;
    this.source = CancelToken.source();
  }
  state = {
    categories: [], // 返回的菜单数据
    categories_content: [], // 右边菜单渲染的内容
    select_index: 0, // 当前选中左边的菜单
  };
  // 左边分类菜单点击的时候触发
  handleItemClick = (e) => {
    // 获取点击选中的项
    let select_index = e.target.getAttribute("data-index");
    this.setState({
      select_index: parseInt(select_index),//当前选中项
      categories_content: this.state.categories[select_index].children
    })
  }
  //右边图片点击的时候
  handleProductItemClick = (e) => {
    let cid = e.target.getAttribute('goods-id')
    if(cid){
      this.props.history.push("/goodList?cid=" + cid);
    }
  }
  // 获取分类菜单的数据
  getCategories = () => {
    myaxios.get('/categories', {
      cancelToken: this.source.token
    }).then(res => {
      this.setCategories(res,false);
    }).catch(err => console.log(err))
  }
  // 设置分类菜单的数据
  // is_storaged 代表是否之前已经缓存过
  setCategories = (res, is_storaged) => {
    //缓存请求的数据
    let categories_cache = {}
    if(!is_storaged){
      // 直接获取本地缓存中的数据即可
      categories_cache = { date: Date.now(), categories: res };
      // 缓存到本地中
      localStorage.setItem('categories_cache',JSON.stringify(categories_cache))
    }
    this.setState({
      categories: res,
      categories_content: res[0].children
    })
  }
  //获取数据
  componentDidMount() {
    // 进来的时候 先判断本地缓存是否过期
    // 如果没有过期的情况下 直接获取本地的缓存
    let categories_cache = JSON.parse(localStorage.getItem('categories_cache'))
    // 如果本地缓存不为空
    if (categories_cache && categories_cache.date) {
      // 判断本地缓存是否过期
      // 当前时间
      let current_time = Date.now()
      // 存储的时间
      let storage_time = categories_cache.data
      if (current_time - storage_time > 60 * 60 * 1000) {
        // 一小时过期
        this.getCategories()
      } else {
        // 缓存没有过期
        // 第二个参数 代表是否已经缓存
        this.setCategories(categories_cache.categories, true)
      }
    } else {
      this.getCategories()
    }
  }
  // 请求取消
  componentWillUnmount() {
    this.source.cancel('分类请求取消');
  }
  render() {
    return (
      <div className="cg-category">
        {/* 分类导航条开始 */}
        <div className="cg-category-nav">
          <NavBar className="category-nav">商品分类</NavBar>
        </div>
        {/* 分类导航条结束 */}
        {/* 分类搜索框开始 */}
        <SearchInput></SearchInput>
        {/* 分类搜索框结束 */}
        {/* 分类列表开始 */}
        <div className="cg-category-content">
          {/* 左侧列表开始 */}
          <div className="content-left" onClick={this.handleItemClick}>
            {this.state.categories.map((v, i) => {
              return <div data-index={i} key={v.cat_id} className={this.state.select_index === i ? "content-left-item active" : "content-left-item"}>
                <span data-index={i}>{v.cat_name}</span>
              </div>
            })}
          </div>
          {/* 左侧列表结束 */}
          {/* 右侧列表开始 */}
          <div className="content-right">
            {this.state.categories_content.map(v => {
              return <div key={v.cat_id} className="content-right-item">
                {/* 右侧标题开始 */}
                <div className="right-item-title">{'/'}{v.cat_name}{'/'}</div>
                {/* 右侧标题结束 */}
                {/* 右侧内容开始 */}
                <div className='product-list' onClick={this.handleProductItemClick}>
                  {v.children && v.children.map(vv => {
                    return <div goods-id={vv.cat_id} key={vv.cat_id} className="product-list-item">
                      <div className="imageWrapper">
                        <img goods-id={vv.cat_id} src={vv.cat_icon} alt="" />
                      </div>
                      <div goods-id={vv.cat_id} className="item-title">{vv.cat_name}</div>
                    </div>
                  })}
                </div>
                {/* 右侧内容结束 */}
              </div>
            })}
          </div>
          {/* 右侧列表结束 */}
        </div>
        {/* 分类列表结束 */}
      </div>
    );
  }
}
export default withRouter(Category);
